<template>
  <el-card class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="运费模板" name="freightTemplate">
        <div class="pb20 pt10">
          <el-button size="mini" @click="handleToNewTemplate" icon="el-icon-plus" type="primary">新建运费模板</el-button>
        </div>
        <el-table border stripe header-row-class-name="table-header-row" v-loading="listLoading" :data="dataList">
          <el-table-column label="模板名称" prop="title"/>
          <el-table-column label="计费方式" prop="chargeType.name">
          </el-table-column>
          <el-table-column label="最后编辑时间" prop="gmtModified">

          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="flex">
                <el-button v-if="scope.row.canEdit" type="text" @click="handleToEditTemplate(scope.row,scope.$index)"
                           size="mini">
                  修改
                </el-button>
                <div class="line-sep" v-if="scope.row.canOp"></div>
                <el-button v-if="scope.row.canDelete" type="text" @click="handleRemoveTemplate(scope.row,scope.$index)"
                           size="mini">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pt10 text-right fz14 c999">共有{{ dataList.length }}条</div>
      </el-tab-pane>
      <el-tab-pane label="地址管理" name="second">
        <div class="form__title">
          退货地址
        </div>
        <returnAddressTable/>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>

import {freightTemplateApi} from "@/feature/pdt/infra/api/freightTemplateApi";
import returnAddressTable from './returnAddressTable'

export default {
  components: {
    returnAddressTable
  },
  data() {
    return {
      activeName: 'freightTemplate',
      listLoading: true,
      dataList: []
    }
  },
  created() {
    this.loadTemplates()
  },
  methods: {
    handleToNewTemplate() {
      this.$router.push('add')
    },
    handleToEditTemplate(row) {
      this.$router.push({path: 'edit', query: {id: row.id}})
    },
    handleRemoveTemplate(row, idx) {
      this.$confirm('确认要删除' + row.title, '提示').then(() => {
        freightTemplateApi.remove(row.id).then(() => {
          this.$message.success('删除成功')
          this.dataList.splice(idx, 1)
        })
      })
    },
    loadTemplates() {
      freightTemplateApi.list().then(data => {
        this.dataList = data
      }).finally(() => {
        this.listLoading = false
      })
    },
    handleClick() {

    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/form.scss";
</style>
